<template>
    <div class="inputBoxdetail">
        <div class="inputDesc" style="height: 116px !important;">
            <el-input class="inputBox" v-model="state.value" type="textarea" 
            @keyup.enter.native="sendTextClick"
                placeholder="你可以问我任何问题">
            </el-input>
            <div class="btnBox">
                <span style="display: flex;">
                    <span @click="btnelBoxClick(1)" :class="state.btnelBoxShow==1?'btnelBox active':'btnelBox'">
                        <img v-if="state.btnelBoxShow==1" src="./chatCom/shendu.svg" alt="">
                        <img v-else src="./chatCom/nao.svg" alt="">
                        <span>深度思考</span></span>
                    <span @click="btnelBoxClick(2)" :class="state.btnelBoxShow==2?'btnelBox active':'btnelBox'">
                        <img v-if="state.btnelBoxShow==2" src="./chatCom/liandiqiu.svg" alt="">
                        <img v-else src="./chatCom/diqiu.svg" alt="">
                        <span>联网搜索</span>
                    </span>
                </span>
                <span style="display: flex;align-items: center;">
                    <el-upload class="upload-demo" style="margin-top:6px" action :show-file-list="false"
                        :http-request="uploadHttpRequestAdd">
                        <img src="./chatCom/lian.svg" alt="">
                    </el-upload>
                    <el-button v-if="!fromchatbtnloading" :disabled="state.value==''" @click="sendTextClick" size="mini"
                        style="width: 30px;height: 30px;" type="primary" circle>
                        <img src="./chatCom/arrow.svg" alt="">
                    </el-button>
                    <el-button v-else size="mini" type="primary" circle
                        style="display: flex;align-items: center;text-align: center;">
                        <span style="width: 14px;height: 14px;background-color: #fff;display: inline-block;"></span>
                    </el-button>
                </span>
            </div>
        </div>
    </div>
</template>
<script setup>
    import {
        reactive,
        watchEffect
    } from "vue";
    const emit = defineEmits([]);
    const props = defineProps({
        fromchatdravalueDisValue: {
            type: String,
            default: () => {
                return ''
            },
        },
        fromchatbtnloading: {
            type: Boolean,
            default: () => {
                return false
            },
        }
    });
    const state = reactive({
        valueDis: '', //会话框显示
        value: '',
        btnelBoxShow: undefined
    })

    function sendTextClick() {
        emit('frominputComvalueDis',state.value)
    }
    function btnelBoxClick(type) {
        state.btnelBoxShow = type
        emit('frominputCombtnelBoxClick',type)
    }

    watchEffect(() => {
        state.value=props.fromchatdravalueDisValue
    })
</script>

<style scoped lang="scss">
    .jbText {
        /*利用background-clip属性实现文字颜色从绿到白的渐变效果*/
        background-image: linear-gradient(90deg, rgba(131, 76, 204, 1) 0%, rgba(42, 130, 228, 1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    // 转圈圈
    @keyframes donut-spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .donut {
        width: 30px !important;
        height: 30px !important;
        animation: donut-spin 1.2s linear infinite;
    }

    .listBoxremove {
        display: flex;
        font-size: 12px;
        color: rgba(227, 60, 100, 1);
        border-radius: 12px;
        align-items: center;
        white-space: nowrap;
        padding: 6px;
    }

    .btnelBox {
        border: 1px solid rgba(206, 206, 206, 1);
        border-radius: 18px;
        display: flex;
        align-items: center;
        padding: 6px;
        font-size: 12px;
        margin-right: 10px;
        cursor: pointer;
        width: 84px;

        img {
            margin-right: 6px;
        }

        &.active {
            background: rgba(42, 130, 228, 0.1) !important;
            color: rgba(42, 130, 228, 1) !important;
            border: 1px solid rgba(42, 130, 228, 0.1);
        }

    }

    .leave-active {
        animation: slidein 0.5s linear reverse;
    }

    .enter-active {
        animation: slideout 0.8s linear;
    }

    @keyframes slidein {
        from {
            transform: translateX(0px);
        }

        to {
            transform: translateX(-30px);
        }
    }

    @keyframes slideout {
        from {
            transform: translateX(-30px);
        }

        to {
            transform: translateX(0px);
        }
    }

    .btn {
        position: relative;
        padding-left: 30px !important;
        cursor: pointer;

        img {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            margin-right: 10px;
        }
    }

    .title {
        font-size: 32px;
        color: rgba(34, 34, 34, 1);
        margin-bottom: 24px;
        font-weight: 700;
        text-align: center;
    }

    .inputBoxdetail {
        margin-top: 20px;
        width: 100%;
        padding: 0 30px;
        max-width: 560px;
        max-height: 224px;
    }

    .inputDesc {
        position: relative;
        height: 116px !important;
    }

    .inputBox {
        border-radius: 24px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        box-shadow: 0px 8px 17px rgba(52, 79, 125, 0.08);
        height: 100% !important;
    }

    .btnBox {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footerBox {
        display: flex;
        align-items: center;
        padding-top: 10px;
    }

    :deep(.el-textarea__inner) {
        border-radius: 24px !important;
        box-shadow: 0px 8px 17px rgba(52, 79, 125, 0.08);
        padding: 20px !important;
        height: 100%;
    }
</style>